今天接續昨天，是我學習Web Security的第5天，雖然原本預計今天是要學習JavaScripts的，但因為在深思熟慮之後我覺得JavaScripts會比較難上手，因此今天我找了Pico CTF上難度分類為簡單且不需要JavaScripts的題目來進行練習(題目名稱: Inspect HTML題目作者: LT 'syreal' Jones)，增加我對於基本的操作理解，也為後面的學習內容打下基礎。

何謂網頁檢查器?

網頁檢查器(英文名為Inspector或者是DevTools)是瀏覽器內建的一套開發工具，讓我們使用者可以查看以及操作網頁的HTML(英文:HyperText Markup Language一種建立網頁的標準標記語言，詳見day3)、CSS(英文:Cascading Style Sheets負責美化網站的語言，詳見day4)、測試JavaScripts、監控網路請求，分析儲存在本機的資料如Cookies(不是餅乾，後面會再講到)和偵錯程式等多項功能。

基本操作

通常我們要呼叫網頁檢查器的話我們會按右鍵-檢查(Inspect)，見樣子我們就能得到網頁檢查器，如果要使用快捷鍵的話Windows系統上通常是Ctrl+Shift+I或是直接按F12，在Mac上則是Cmd+Option+I。

上面的截圖就是在此題開啟網頁檢查器後的樣子，主要面板(最上面那排分頁)分為Elements、Style、Console、Network、Application。下面我來介紹一下這些分別有哪些用途:

Elements（元素）

• 顯示 HTML 結構
• 可即時修改 HTML 與 CSS
• 用來找隱藏內容、調整版面

Styles（樣式）

• 與 Elements 搭配
• 查看/修改 CSS 樣式
• 可測試不同顏色、大小、位置

Console（主控台）

• 可以直接輸入 JavaScript 指令
• 顯示錯誤訊息與 log
• 用來測試 JS payload（像 XSS）

Network（網路）

• 監控所有 HTTP/HTTPS 請求
• 分析 API 回應、檔案載入
• 可用來找 flag、token、API endpoint

Application（應用程式）
查看儲存在瀏覽器的資料：

• Cookies
• LocalStorage
• SessionStorage
  可刪除或修改它們

而在這題當中我們要學習的是最基本的尋找隱藏訊息，而我們在Elements裡搜尋關鍵字，如picoCTF之類的關鍵字則隱藏訊息或我們沒找到的訊息會被標註出來，這題簡單的理由是因為FLAG被編碼在HTML裡面，有時FLAG不一定會被編碼在HTML當中也有可能被藏在其他地方，我這邊也推薦其他幾題網頁檢查器的題目讓大家實做看看。

第一題:
WebDecode(題目平台:picoCTF 作者: Nana Ama Atombo-Sackey)
https://play.picoctf.org/practice/challenge/427?difficulty=1&page=2

第二題:
Insp3ct0r(題目平台:picoCTF 作者: zaratec/danny)
https://play.picoctf.org/practice/challenge/18?difficulty=1&page=7
這兩題我認為是有助於我們新手去實際了解網頁檢查器的實際運作模式的基礎題目，若是有空務必要試著做看看，實際操作過後才會更加了解網頁檢查器的使用方式喔。

今日小結

今天我們學習了網頁瀏覽器的實際操作模式，我認為這對我們之後再進行其他的操作會有更好的基礎，所以是需要好好練習的基礎項目之一。